<template>
	<view class="container">
		<view class="bg"></view>
		<view class="header">
			<image :src="userInfo.avatarUrl" mode=""></image> {{userInfo.nickname}}
		</view>
		<navigator url="./message/message">
			<view class="message">
				<image src="@/static/bell.png" mode=""></image>
				<text v-if="userInfo.messageCount > 0">{{userInfo.messageCount}}</text>
			</view>
		</navigator>
		<view class="datas">
			<navigator class="item" url="./points/points">
				<text>{{userInfo.score}}</text>
				我的积分
			</navigator>
			<navigator class="item" url="./balance/balance">
				<text>{{userInfo.money}}</text>
				我的余额
			</navigator>
			<navigator class="item" url="./order/order">
				<text>{{userInfo.orderCount}}</text>
				我的订单
			</navigator>
		</view>
		<view class="list">
			<navigator url="./setting/setting">
				<view class="col">
					<view class="item">
						<image src="/static/user/icon1.png" mode=""></image> 个人设置
					</view>
					<image class="more" src="/static/arrow-right.png" mode=""></image>
				</view>
			</navigator>
			<navigator url="./vip/index">
				<view class="col">
					<view class="item">
						<image src="/static/user/vip-icon2.png" mode=""></image> 会员中心
					</view>
					<image class="more" src="/static/arrow-right.png" mode=""></image>
				</view>
			</navigator>
			<navigator url="./coupon/coupon">
				<view class="col">
					<view class="item">
						<image src="/static/user/icon3.png" mode=""></image> 我的优惠
					</view>
					<image class="more" src="/static/arrow-right.png" mode=""></image>
				</view>
			</navigator>
			<navigator url="">
				<view class="col">
					<view class="item">
						<image src="/static/user/icon4.png" mode=""></image> 我的推广
					</view>
					<image class="more" src="/static/arrow-right.png" mode=""></image>
				</view>
			</navigator>
			<navigator url="">
				<view class="col">
					<view class="item">
						<image src="/static/user/icon5.png" mode=""></image> 我的建议
					</view>
					<image class="more" src="/static/arrow-right.png" mode=""></image>
				</view>
			</navigator>
			<navigator url="./about/index">
				<view class="col">
					<view class="item">
						<image src="/static/user/icon6.png" mode=""></image> 妙有非我
					</view>
					<image class="more" src="/static/arrow-right.png" mode=""></image>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
			}
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			getInfo() {
				this.$post("/user/info").then(res => {
					this.userInfo = res.data.userInfo
				})
			}
		}
	}
</script>

<style lang="scss">
	.bg {
		background: linear-gradient(90deg, rgba(155, 227, 224, 1) 0%, rgba(89, 196, 196, 1) 60%, rgba(22, 164, 167, 1) 100%);
		height: 300rpx;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}

	.header {
		position: relative;
		color: #fff;
		display: flex;
		align-items: center;
		font-size: 40rpx;
		margin-bottom: 60rpx;
		font-weight: bold;

		image {
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
			border: 4rpx solid #fff;
			margin-right: 20rpx;
		}
	}

	.message {
		position: absolute;
		width: 56rpx;
		height: 56rpx;
		top: 70rpx;
		transform: translateY(-50%);
		right: 40rpx;

		text {
			position: absolute;
			background-color: #F90505;
			color: #fff;
			line-height: 30rpx;
			border-radius: 100px;
			padding: 0 12rpx;
			font-size: 24rpx;
			right: 0%;
			top: 0;
			transform: translate(10rpx, -10rpx);
		}
	}

	.datas {
		display: flex;
		background: linear-gradient(-90deg, rgba(185, 227, 244, 1) 40%, rgba(12, 164, 81, 1) 95%);
		padding: 40rpx 0;
		border-radius: 20rpx;
		position: relative;

		.item {
			flex: 1;
			text-align: center;
			color: #fff;
			font-size: 30rpx;

			text {
				font-weight: bold;
				font-size: 60rpx;
				color: #000;
				display: block;
			}
		}
	}

	.list {
		padding: 0 40rpx;

		.col {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;

			.item {
				display: flex;
				align-items: center;
				font-size: 28rpx;

				image {
					margin-right: 10rpx;
				}
			}

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}
</style>